<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import { throttle } from 'throttle-debounce'
import store from './store'
export default {
  name: 'App',
  mounted() {
    this.$_throttledResize = throttle(300, this.resize)
    this.$_initResizeEvent()
  },
  beforeDestroy() {
    this.$_destroyResizeEvent()
  },
  created() {
    this.resize()
  },
  methods: {
    resize() {
      const clientHeight = document.body.clientHeight
      const offsetHeight = document.body.offsetHeight
      const screenHeight = window.screen.height
      store.dispatch('app/setHeight', { clientHeight, offsetHeight, screenHeight })
    },
    $_initResizeEvent() {
      window.addEventListener('resize', this.$_throttledResize)
    },
    $_destroyResizeEvent() {
      window.removeEventListener('resize', this.$_throttledResize)
    }
  }
}
</script>
<style lang="scss">
:root {
  --font-size: 14px;
}

.el-form {
  .el-form-item__label {
    font-size: var(--font-size);
  }
}

.el-input__inner {
  font-size: var(--font-size) !important;
}
</style>
